import {Form,Button,Input,Select,message} from 'antd';
import {useEffect} from 'react';
import {useNavigate} from 'react-router-dom';
import {observer} from 'mobx-react'
import store from '../../../store';

const { Option } = Select;
const {Role} = store;

const CreateAccount = ()=>{
    const navigate = useNavigate();
    // 角色
    useEffect(()=>{
        // console.log(Role.roleData);
        if(Role.roleData.length===0){
            Role.getRoles();
        }
    },[])
    // 创建
    const onFinish = (values)=>{
        let m ={...values,status: '正常'};
        // 还需要角色的id
        Role.addRen(m).then(data=>{
            console.log(data);
            if(data.code===200){
                message.success('添加成功');
                navigate(-1);
                Role.getRen();
            }else{
                message.error('添加失败')
            }
        })
        
    }
    
    // 返回
    const goBack=()=>{
        navigate(-1)
    }
    return  <>
    <div className='create_top'>创建账号</div>
    <Form name="createName"
    labelCol={{ span: 5 }}
    wrapperCol={{ span: 15 }}
    onFinish={onFinish} autoComplete="off"
    className="create_form">
        <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入登录账户名！' },
            {pattern: new RegExp(/[a-zA-z0-9]{6}/),message: '用户名需由6位数字、字母组成'}]}            
        >
            <Input placeholder='请输入登录账户名' />
        </Form.Item>
        <Form.Item
            label="登录密码"
            name="pwd"
            rules={[{ required: true, message: '请输入账号登录密码！' },
            {
            //   pattern: new RegExp(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,16}/),
            //   message: '必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 6-16 之间'
                pattern: new RegExp(/[0-9]{6}/),
                message: '必须由6位数字组成'
            }]}
        >
            <Input placeholder='请输入账号登录密码' />
        </Form.Item>
        <Form.Item
            label="真实姓名"
            name="name"
            rules={[{ required: true, message: '请输入真实姓名！' }]}
        >
            <Input placeholder='请输入真实姓名' />
        </Form.Item>
        <Form.Item
            label="手机号码"
            name="phone"
            rules={[{ required: true, message: '请输入手机号！' },
            {pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/}    
        ]}
        >
            <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
            label="电子邮箱"
            name="email"
            rules={[{ required: true, message: '请输入邮箱账号！' },
            {pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/}]}
        >
            <Input placeholder='请输入邮箱账号' />
        </Form.Item>
        <Form.Item
            label="选择角色"
            name="role_id"
            rules={[{ required: true, message: '请选择！' }]}
        >
            <Select placeholder='请选择'>
                {Role.roleData.map((item,index)=><Option value={item.id} key={index}>{item.roleMark}</Option>)}
            </Select>
        </Form.Item>
        <Form.Item className='create_btn'>
           <Button type="primary" htmlType="submit"> 创建 </Button>
           <Button  onClick={()=>{goBack()}} className="te"> 取消 </Button>
        </Form.Item>
    </Form>
    </>
}
export default observer(CreateAccount)